<template>
  <view class="my-activities-page">
    <!-- 头部区域：返回按钮 + 页面标题 -->
    <my-navbar title="我报名参加的活动列表" leftIcon="arrow-left" bgColor="#4facfe" :custom="false" :autoBack="true"
    		titleStyle="color:#ffffff" leftIconColor="#ffffff" leftIconSize="40"></my-navbar>

    <!-- 活动列表：循环渲染每个活动项 -->
    <view class="activity-list">
      <view 
        class="activity-item" 
        v-for="(activity, index) in activityList" 
        :key="index"
        @click="goToActivityDetail(activity)"
      >
        <text class="activity-name">{{ activity.eventtitle }}</text>
        <text class="activity-location">活动地点：{{ activity.detailedaddress }}</text>
        <text class="activity-time">活动时间：{{ activity.orderday }} {{ activity.ordertime }}</text>
        <!-- 箭头图标（可根据需求替换为uView等组件库的图标） -->
        
      </view>
    </view>
  </view>
</template>

<script>
	import {
		getattendevent  
	} from '@/config/api.js';
export default {
  data() {
    return {
		userInfo:{},
		token:'',
      activityList: [
    
      ] // 活动列表数据，实际可从后端接口获取
    };
  },
  methods: {
    goBack() {
      // 返回上一页
      uni.navigateBack();
    },
    goToActivityDetail(activity) {
      // 前往活动详情页，可传递活动数据
      uni.navigateTo({
        url: `/other_pages/venueDetail/venueDetail?name=${activity.name}&location=${activity.location}&time=${activity.time}`
      });
    },
	async getmyattend() {
		const {
			data
		} = await getattendevent({
			// phone:this.userInfo.phone,
			// nickName:this.userInfo.nickName,
			// eventcity:this.userInfo.city,
			openid:this.token
		}, {
			header: {
				'Content-Type': 'application/json'
			},
		})
		console.log(data)
		this.activityList=data.rows
		setTimeout(() => {
			uni.hideLoading()
		}, 2000)
	},
  },
  onLoad(options) { // options 包含路由传递的所有参数
      var isLogin = uni.getStorageSync('isLogin')
      if (isLogin == true) {
      	this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
		this.token = uni.getStorageSync('token');
      	console.log(this.userInfo)
		this.getmyattend()
      }
  	},
  onReady() {},
  onShow() {}
};
</script>

<style scoped>
.my-activities-page {
  background-color: #fff;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  border-bottom: 1px solid #eee;
}

.back-btn {
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 8rpx;
  padding: 8rpx 16rpx;
  font-size: 28rpx;
  margin-right: 24rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

.activity-list {
  padding: 0 24rpx;
}

.activity-item {
  margin: 24rpx 0;
  padding: 24rpx;
  border: 1px solid #ccc;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  position: relative;
}

.activity-name {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 12rpx;
}

.activity-location,
.activity-time {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.arrow-icon,
.lightning-icon {
  position: absolute;
  top: 50%;
  right: 24rpx;
  transform: translateY(-50%);
}

.lightning-icon {
  /* 若需要自定义闪电图标样式，可在此添加 */
  /* 示例：使用背景图 */
  /* background-image: url('/static/lightning.png');
  background-size: cover;
  width: 32rpx;
  height: 32rpx; */
}
</style>